Skip to content

feat: add client prop to Auth0Provider#1041

Merged
yogeshchoudhary147 merged 10 commits intomainfrom
feat/client-prop-and-factory
Mar 20, 2026
Merged

feat: add client prop to Auth0Provider#1041
yogeshchoudhary147 merged 10 commits intomainfrom
feat/client-prop-and-factory

Conversation

@yogeshchoudhary147
Copy link
Contributor

@yogeshchoudhary147 yogeshchoudhary147 commented Mar 9, 2026

What

Adds a client prop to Auth0Provider so a pre-configured Auth0Client instance can be shared between the React tree and code outside of React's lifecycle (e.g. TanStack Start client function middleware).

Closes #1037. Supersedes #849 (thanks to @rodrigowbazevedo for the original draft).

Usage

import { Auth0Client } from '@auth0/auth0-spa-js';
import { Auth0Provider } from '@auth0/auth0-react';

const client = new Auth0Client({ domain, clientId });

// Outside React (e.g. TanStack Start client function middleware)
// Note: the raw Auth0Client method is getTokenSilently (not getAccessTokenSilently)
const token = await client.getTokenSilently();

// Inside React — Auth0Provider uses the same client instance
function App() {
  return <Auth0Provider client={client}><MyApp /></Auth0Provider>;
}

Notes

  • Fully backward compatible — existing usage without client prop is unchanged
  • Calling methods on the raw client does not update React state — use hooks inside React for that

@yogeshchoudhary147 yogeshchoudhary147 requested a review from a team as a code owner March 9, 2026 11:52
@rodrigowbazevedo
Copy link

Thanks! 🚀

@yogeshchoudhary147 yogeshchoudhary147 force-pushed the feat/client-prop-and-factory branch from 463a4ce to 67b5b75 Compare March 9, 2026 13:22
@roccomaniscalco
Copy link

Awesome 💯 Thank you!

<MyApp />
</Auth0Provider>
);
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should highlight potential pitfalls and anti patterns with this approach.

What happens if a user initilaise Auth0Provider with both raw client and together

export const auth0Client = createAuth0Client({
  domain: 'YOUR_AUTH0_DOMAIN',
  clientId: 'YOUR_AUTH0_CLIENT_ID',
  authorizationParams: {
    redirect_uri: window.location.origin,
  },
});
 <Auth0Provider
              client={auth0Client}
              domain={config.domain}
              clientId={config.clientId}
              key={JSON.stringify(config)}
              authorizationParams={{
                redirect_uri: window.location.origin,
                audience: config.audience || 'default'
              }}
 ...
            >
            </Auth0Provider>

I believe, currently this is allowed, should we add checks to restrict this behaviour or at-least document this as an anti pattern.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch. Added a runtime console.warn for this case. TypeScript users are already covered at compile time via client?: never on Auth0ProviderWithConfigOptions.

redirect_uri: window.location.origin,
},
});
```
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This may also lead to inconsistent api behaviour, for example

Someone who creates a rawClient would need to call

export const auth0Client = createAuth0Client({
  domain: 'YOUR_AUTH0_DOMAIN',
  clientId: 'YOUR_AUTH0_CLIENT_ID',
  authorizationParams: {
    redirect_uri: window.location.origin,
  },
});


//called on button click
client.getTokenSilently({ ... })

vs

Call silent token token via auth0 hook

var auth0 = useAuth0();

//called on button click
auth0.getAccessTokenSilently({ cacheMode: 'off' })

Should we highlight this potential mismatch.

Additionally for anyone using the raw auth0 client via createAuth0Client(...) will internal state in react sdk created in https://github.com/auth0/auth0-react/blob/main/src/reducer.tsx will be updated ?
In case they are not, will there be potential side effects ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a note on both points: the method naming difference (getTokenSilently vs getAccessTokenSilently), the state sync behaviour, and a callout to avoid calling client.logout() directly on the raw client.

@yogeshchoudhary147 yogeshchoudhary147 force-pushed the feat/client-prop-and-factory branch from 672c6fa to 82cc763 Compare March 19, 2026 04:09
@yogeshchoudhary147 yogeshchoudhary147 changed the title feat: add client prop and createAuth0Client factory feat: add client prop to Auth0Provider Mar 20, 2026
@yogeshchoudhary147 yogeshchoudhary147 force-pushed the feat/client-prop-and-factory branch from 54dab9c to 4889dce Compare March 20, 2026 12:04
@yogeshchoudhary147 yogeshchoudhary147 merged commit a63eb39 into main Mar 20, 2026
12 checks passed
@yogeshchoudhary147 yogeshchoudhary147 deleted the feat/client-prop-and-factory branch March 20, 2026 13:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Accept client as a prop in Auth0Provider

5 participants